<template>
  <div>
    <div>
      <ComHeader title="店铺查询" leftArrow='true' />
      <div class="top">
          <div class="store-box">
        <!-- 可视列表 -->
        <div  class="city-list">
          <p class="title">请选择需要查询的信息</p>
          <p @click="find('sheng')">
            <mt-field class="" label="省份" placeholder="请选择需要查询的省份" type="text" rows="4" v-model="sheng" :state="sheng =='' ? '' : 'success'" readonly="readonly"></mt-field>
          </p>
          <p @click="find('shi',shengcode,1)">
            <mt-field class="" label="城市" placeholder="请选择需要查询的城市" type="text" rows="4" v-model="shi" :state="shi =='' ? '' : 'success'"  readonly="readonly"></mt-field>
          </p>
          <p  @click="find('qu',shicode)">
            <mt-field class="" label="县区" placeholder="请选择需要查询的县区" type="text" rows="4" v-model="qu"  :state="qu =='' ? '' : 'success'"  readonly="readonly"></mt-field>
          </p>
          <p>
            <mt-field class="" label="关键字" placeholder="请选择需要查询的关键字" type="text" rows="4" v-model="key"  @input="qingkong" :state="key =='' ? '' : 'success'"></mt-field>
          </p>      
          <mt-button type="primary" size="small" style="width: 100%;" @click.stop="chazhao">店铺查询</mt-button>
        </div>

        <!-- 店铺信息列表渲染 ，滚动，分页-->
          <div class="scroll-box">
            <scroll 
              class="scroll"
              :data="list"
              :pullup="isPullup"
              @scrollToEnd="searchMore"
              ref="suggest">
                <ul class="listul">
                  <li v-for="(item,idx) in list" :key="idx" v-if="list">
                      <p>塞拉菲娜第 {{item.id}} 分店</p>
                      <p>店铺地址：{{item.address}}</p>
                  </li>
                  <li v-if="nodata" class="text-center">
                    <img src="../../../static/img/not-data.png"/>
                    <span>抱歉！暂无相关消息记录</span>
                  </li>
                  <p class="not-tit" v-if="ts" style="text-align: center">————我是有底线的————</p>
                  <!-- 店铺加载效果 -->
                  <loading v-show="dploading" title="加载中" ></loading>
                </ul>
            </scroll>
          </div>
        </div>

        <!-- 城市选项弹窗 -->
        <div v-if="show" @click="show = false;" class="city-window">
          <ul class="btnul">
            <!-- 三级时，判断是否出现跳出选框 -->
            <p v-if="i == 3">
              <mt-button type="primary" size="small" @click="show = false;chazhao()" class="btn-find">查询 {{shi}} 所有店铺</mt-button>
              <span>请选择县区</span >
            </p> 
            <li v-for = '(item,idx) in arr1' :key="idx" :id="item.code" @click="find(now,item.id,item.name)">{{item.name}}</li>
          </ul>
          <!-- 城市加载效果 -->
        </div>
        <loading v-if="cityloading" title="" style="position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%)"></loading>
      </div>
    </div>
  </div>
</template>

<script>
  // 导入数据
  import api from "@/fetch/api"
  import { Button ,Toast ,Field} from 'mint-ui';
  import ComHeader from '@/common/ComHeader'
  import Loading from '@/base/loading/loading'
  import Scroll from '@/base/scroll/scroll'
  // import {Indicator} from 'mint-ui';

  function handler() {
   
    event.preventDefault();
  }
  export default {
    name: 'FindShop',
    data() {
      return {
        sheng:'',
        shengcode:'',
        shi:'',
        shicode:'',
        qu:'',
        qucode:'',
        key:'',
        arr1:[],
        list:[],
        now:'sheng',
        i:0,
        page: 1,
        ts:false,
        limit: 10,
        show:false,
        nodata:false,
        dploading:false,
        // 滚动分页参数
        cityloading:false,
        pullUpLoad: true,
        isPullup: true,
        isHasLoadMore: true,    // 是否价值底部loading
        nextPage: null,         // 是否存在下一页
        poge_total:2
      };
    },
    components: {
      ComHeader,
      Button,
      Toast,
      Field,
      Loading,
      Scroll,
      // Indicator
    },
    beforeDestroy() {
      document.body.removeEventListener('touchmove',handler,false);
    },
     created() {
        document.body.addEventListener('touchmove',handler,{passive:false});
     },
     methods: {
        //  触底事件，打开加载动画，页面自加，触发函数
        searchMore() {
          this.dploading = true
          this.page++;
          this.chazhao()
        },

        // 输入关键字时，清空列表，清空提示样式
        qingkong(){
          this.list = []
          this.dploading = false
          this.ts = false
          this.page = 1
          this.nodata = false
        },

        //  查找城市
        find(a,b,c){
          if(b == ""){
            a = 'sheng'
          }
          this.page_total = 2
          this.i = 0
          this.list = []
          this.show = true
          this.page = 1
          this.dploading = false
          this.cityloading = true
          // 查找省
          if(a == 'sheng'){
            this.sheng = ''
            this.shi = ''
            this.qu = ''
            this.key = '' 
            this.arr1 = []
            var params = {};
            api.fouraddress(params)
              .catch(error => {
                console.log(error)
                this.arr1 = error.data
                this.cityloading =  false  
                this.now = 'shi'
            })
          // 查找市
          }else if(a == 'shi'){
            console.log(a,b,c)
            console.log('市123')
           if(this.sheng.toString().slice(-1) == '市') {
                this.find('sheng')
                console.log(77777777)
                return
               }
            // 写入数据
            if(this.sheng == ''){
              this.sheng = c
              this.shengcode = b          
            }
            // 清空原数据
            this.shi = ''
            this.qu = ''
            this.key = '' 
            this.arr1 = []
            var params2 = {
              parent_id:b,
            };
            api.fouraddress(params2)
              .catch(error => {
                this.show = true
                this.arr1 = error.data
                this.cityloading =  false  
                this.now = 'qu'
            })
          // 查找区
          }else if(a== 'qu'){
              // 写入数据，清空原有
              if(this.shi == ''){
                this.shi = c
                this.shicode = b                  
              }
              this.qu = ''
              this.key = '' 
              var params3 = {
                parent_id:b,
              };
              api.fouraddress(params3)
                .catch(error => {
                  this.show = true
                  this.arr1 = error.data
                  this.cityloading = false
                  this.now = 'detail'
                  // 显示提示
                  this.i = 3
              })
          // 查找关键字
          } else if(a == 'detail'){
              this.qu = c
              this.cityloading = false
          }
          // 查找时，清空提示
          this.ts = false

        },

        // 查询店铺功能
        chazhao(){
          // 未填省市信息的拦截
          if(this.sheng == '' || this.shi == ''){
            Toast("请选择需要查询的城市信息")
            return;
          }

          // 数据加载完毕的提示
          if(this.ts ==true || this.page > this.page_total){
            Toast("暂无更多信息")
            this.dploading = false
            return
          }

          // 设置参数
          if(this.key){
            var params4 = {
                province:this.sheng,
                city:this.shi,
                quxian:this.qu,
                myaddress:this.key
              }
          }else if(this.qu){
              var params4 = {
                province:this.sheng,
                city:this.shi,
                quxian:this.qu
              }
          }else{
              var params4 = {
                province:this.sheng,
                city:this.shi
              }
          };
          // 拼接页面信息
          params4 = Object.assign(params4,{page:this.page})
          console.log(params4)
          // 控制店铺下端动画
          this.dploading = true
          // 查找不到的提示
          this.nodata = false
          api.apiShopaddress(params4)
                  .catch(error => {
                    console.log(error)
                    if(error.data.msg){
                      this.nodata = true
                      this.dploading = false
                      Toast(error.data.msg)
                      return
                    }
                    var arr = error.data.address
                    // 拼接数据
                    this.list = [...this.list, ...arr]
                    // 返回的数组，长度小于10，取消下次加载数据，让下端加载效果消失
                    this.page_total = error.data.page_total
                    // if(arr.length<10){
                    //   this.dploading = false
                    //   this.ts = true
                    // }                 

          })

        },
      },
      
  };
</script>

<style lang="stylus" scoped>
  html {
    overflow hidden;
  }
  .scroll{
    height: 100%;
  }
  .scroll-box{
    position: fixed;
    top: 8.5rem;
    width: 100%;
    bottom: 0px;
  }
  .text-center {
    text-align center
  }
  .city-list {
    position: fixed;
    top: 1.5rem;
    left: 0px;
    right: 0px;
  }
  .top{padding-top: 1.45rem;}
  .city-list .title{
    background-color: #fff;
    font-size: 0.5rem;
    text-align: center;
    line-height: 0.75rem;
  }
  .city-window{
    width: 100%; background-color:rgba(0, 0, 0, 0.5);padding:20px 0px;position: fixed;left: 0;right: 0;top: 0;bottom: 0;display: flex;align-items: center;
    .btnul{
        background-color: rgb(255, 255, 255);padding:30px 5px;width: 100%;min-height: 200px;
        p{
          margin-bottom: 10px;
          .btn-find{
            width: 83%;margin:10px 30px;
          }
        }
        li{
          width: 33%;
          float:left;text-align: center;padding:5px 0;          
        }
      }
  }
  .listul{
    margin-top: 10px;
    background #f0f0f0;
    padding-top 10px;
    li{
        padding:10px 20px;background-color: #fff;border-radius: 10px;margin: 10px;
      }
  }
</style>